<template>
  <a-drawer :title="titleMap" :width="550" :visible.sync="visible"
    :body-style="{ 'padding-top': '0px', paddingBottom: '80px' }" @close="close">
    <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }" layout="horizontal">
      <a-form-item :label="$t('user.verification-code.required1115661105786')">
        <br>
        <a-input v-decorator="['ConfigurationItemsContent', { rules: [{ required: true, message: $t( 'user.verification-code.required111566110577227') }] }]"
          :placeholder="$t('user.verification-code.required111566110578634534534')" style="margin-left: -90px;"/>
      </a-form-item>
      <a-form-item label="ID" v-if="mode == 1" class="hidden">
        <a-input v-decorator="['Id']" />
      </a-form-item>
      <a-form-item label="ConfigurationItemsState" v-if="mode == 0" class="hidden">
        <a-input v-decorator="['ConfigurationItemsState']" />
      </a-form-item>
    </a-form>
    <div class="absolute right-0 bottom-0 w-full px-4 py-[10px] bg-white text-left z-1 flex justify-center">
      <a-row class="w-full" :gutter="24">
        <a-col :span="12">
          <a-button class="w-full border-none hover:bg-[#3F8CFF] hover:bg-opacity-5 shadow" @click="close">{{ $t('app.setting.themecolor.rr') }}</a-button>
        </a-col>
        <a-col :span="12">
          <a-button :loading="loading" class="w-full border-none shadow" type="primary" @click.native.prevent="submit()">
            <span v-if="!loading">{{ $t('app.setting.themecolor.ss') }}</span>
            <span v-else>{{ $t('app.setting.themecolor.tt') }}...</span>
          </a-button>
        </a-col>
      </a-row>
    </div>
  </a-drawer>
</template>

<script>

import { configurationCreateUpdate } from "@/api/configs"

export default {
  data() {
    return {
      // 下面这些都是通用的
      form: this.$form.createForm(this),
      visible: false,
      loading: false,
      // 这个要根据服务修改title
      titleMap: '',
      mode: 0,
    }
  },
  mounted() { },
  methods: {
    /**
     *
     * @param {*} type 0 新增 1 修改
     * @param {*} data 列表传过来的值
     */
    async open(mode = 0, data = {}) {
      this.titleMap=this.$t('user.verification-code.required111566110577156')
      this.mode = mode
      this.visible = true
      await this.$nextTick()
      // 如果是修改
      if (mode == 1) {
        this.titleMap=this.$t('user.verification-code.required111566110577157')
        //修改的时候需要给form赋值 
        this.form.setFieldsValue({
          ConfigurationItemsContent: data.ConfigurationItemsContent,
          Id: data.Id,
        })
      } else {
        this.form.setFieldsValue({
          ConfigurationItemsState: 11
        })
      }
    },
    // 提交 通用的
    submit() {
      const {
        form: { validateFields },
      } = this
      // 按钮loading
      this.loading = true
      // validateFields 是校验form表单数据 
      // force: true 是默认所有字段都校验
      // values 表单的值 
      validateFields({ force: true }, async (err, values) => {
        if (!err) {
          try {
            const params = { ...values }
            await configurationCreateUpdate({ ...params })
            // 如果成功就调用父页面当前组件的succeed上绑定的事件
            this.$emit('succeed')
            this.$message.success(this.$t( 'user.verification-code.required111566110577308'))
            //如果成功就关闭
            this.close()
          } catch (error) {
            this.$message.error(error)
          } finally {
            this.loading = false
          }
        } else {
          setTimeout(() => {
            this.loading = false
          }, 600)
        }
      })
    },
    // 关闭 通用的 
    close() {
      // 修改侧边栏状态
      this.visible = false
      // 清空form的值
      this.form.resetFields()
    },
  },
}
</script>
<style lang="less" scoped>
/deep/.ant-form-item-label {
    display: inline-block;
    overflow: visible !important;
    line-height: 39.9999px;
    white-space: nowrap;
    text-align: right;
    vertical-align: middle;
}
</style>
